<template>
	<view class="setting-container">
		<view class="setting-header">
			<text class="header-title">设置</text>
		</view>
		
		<view class="setting-content">
			<!-- 基础设置 -->
			<uni-section title="基础设置" type="line">
				<uni-list>
					<uni-list-item title="清除缓存" :show-arrow="true" @click="clearCache">
						<template v-slot:footer>
							<text class="cache-size">{{ cacheSize }}</text>
						</template>
					</uni-list-item>
					<uni-list-item title="检查更新" :show-arrow="true" @click="checkUpdate">
					</uni-list-item>
				</uni-list>
			</uni-section>
			
			<!-- 关于 -->
			<uni-section title="关于" type="line">
				<uni-list>
					<uni-list-item title="版本号" :show-arrow="false">
						<template v-slot:footer>
							<text class="version-text">{{ version }}</text>
						</template>
					</uni-list-item>
					<uni-list-item title="用户协议" :show-arrow="true" @click="goToAgreement">
					</uni-list-item>
					<uni-list-item title="隐私政策" :show-arrow="true" @click="goToPrivacy">
					</uni-list-item>
				</uni-list>
			</uni-section>
			
			<!-- 退出登录 -->
			<view class="logout-section">
				<button class="logout-btn" @click="handleLogout">退出登录</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Setting',
	data() {
		return {
			version: '1.0.0',
			cacheSize: '0KB'
		}
	},
	onLoad() {
		this.getCacheSize();
	},
	methods: {
		// 获取缓存大小
		getCacheSize() {
			// 这里可以实现获取缓存大小的逻辑
			this.cacheSize = '2.5MB';
		},
		
		// 清除缓存
		clearCache() {
			uni.showModal({
				title: '提示',
				content: '确定要清除缓存吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除缓存逻辑
						uni.clearStorage();
						uni.showToast({
							title: '缓存已清除',
							icon: 'success'
						});
						this.cacheSize = '0KB';
					}
				}
			});
		},
		
		// 检查更新
		checkUpdate() {
			uni.showLoading({
				title: '检查中...'
			});
			
			// 模拟检查更新
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({
					title: '已是最新版本',
					icon: 'success'
				});
			}, 1500);
		},
		
		// 跳转到用户协议
		goToAgreement() {
			this.goPage('/subPages/webview/webview?title=用户协议&url=' + encodeURIComponent('https://example.com/agreement'));
		},
		
		// 跳转到隐私政策
		goToPrivacy() {
			this.goPage('/subPages/webview/webview?title=隐私政策&url=' + encodeURIComponent('https://example.com/privacy'));
		},
		
		// 退出登录
		handleLogout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						this.logout();
					}
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.setting-container {
	background-color: #f6f9ff;
	min-height: 100vh;
}

.setting-header {
	padding: 20px;
	background-color: #ffffff;
	
	.header-title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
	}
}

.setting-content {
	padding: 20px;
}

.cache-size, .version-text {
	color: #999999;
	font-size: 14px;
}

.logout-section {
	margin-top: 40px;
	padding: 0 20px;
}

.logout-btn {
	width: 100%;
	height: 44px;
	background-color: #ff4757;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	
	&:active {
		background-color: #ff3742;
	}
}
</style>
